/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-unused-vars */
import { SettingFilled } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout'
import { Col, Row, Modal } from 'antd';
import React, { useEffect, useState } from 'react'
import { createContext } from 'react';
import ComRecord from './ComRecord';
import styles from './index.less'
import LearnWarn from './LearnWarning';
import SettingModal from './SettingModal';
import StudentList from './StudentList';
import StudySituation from './StudySituation';
import GameList from './Game'
import HomeWork from './HomeWork';


export const ModalContext = createContext({
  visible: false,
  hideModal: (v: boolean) => { },
  warnInfo: [],
  dataInfo: { teacherId: '', name: '' },
  setWarningSet: (v: any) => { },
  unlock: { passGameFlag: null, enableGame: null, aiGoFlag: null }

});
import { history } from 'umi';
import { getCourseInfo, getInfoByStepType } from '@/services/student';
import moment from 'moment';
import { getWarnDefault, getWarnSet } from '@/services/warning';
import { CheckPermission } from '@/components/Authorized/CheckPermissions';
import Studio from './studio';
export default function CourseInfo() {
  const [activeKey, setActiveKey] = useState<string>("1");
  const [visible, setVisible] = useState<boolean>(false)
  const [show, setModal] = useState<boolean>(false)
  const [loading, setLoading] = useState<boolean>(false)
  const [warnInfo, setWarningSet] = useState<any>()
  const [dataInfo, setDataInfo] = useState<any>()
  const [unlock, setUnlock] = useState<any>()
  const hideModal = (bool: boolean) => {
    setVisible(bool)
  }
  const settingCtx = {
    visible: visible,
    hideModal: hideModal,
    warnInfo: warnInfo,
    dataInfo: dataInfo,
    setWarningSet: setWarningSet,
    unlock: unlock
  }
  const { id } = history.location.query || {}
  useEffect(() => {
    (async () => {
      const res = await getCourseInfo({ id: id })
      setDataInfo(res.result)
    })()
  }, [])
  const stats = (e: any) => {
    if (e == 0) {
      return '未开始';
    } else if (e == 1) {
      return '已开始'
    } else if (e == 2) {
      return '已结束'
    } else if (e == 3) {
      return '已删除'
    } else {
      return '-'
    }
  }
  const showSetting = async () => {
    setVisible(true);
    const res = await getWarnSet({ activityId: id });
    setWarningSet(res?.result?.records);
    const res1 = await getInfoByStepType({ id: id });
    setUnlock(res1?.result);
    // await scheduleTaskWarningRule({});
    if (!res?.result?.records || res?.result?.records?.length == 0) {
      setModal(true);
    }
  }
  return (
    <PageContainer
      className={styles.info_container}
      header={{
        title: '',
        breadcrumb: {},
      }}
      content={
        <Row className={styles.row}>
          <Col span={5} className={styles.row_item}>
            <div className={styles.item}>
              <div className={styles.label}>课程ID：</div>
              <div>{id || '-'}</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label}>主讲老师：</div>
              <div>{dataInfo?.teacherName || "-"}</div>
            </div>
          </Col>
          <Col span={16} className={styles.row_item}>
            <div className={styles.item}>
              <div className={styles.label1}>课程名称：</div><div>{dataInfo?.name || '-'}（{moment(dataInfo?.startTime).format('YYYY.MM.DD HH:mm')} - {moment(dataInfo?.endTime).format('YYYY.MM.DD HH:mm')} ）</div>
            </div>
            <div className={styles.item}>
              <div className={styles.label1}>当前学习进度：</div><span>{`${dataInfo?.status != 1 ? stats(dataInfo?.status) : (dataInfo?.itemName || '-') + ' ' + (dataInfo?.itemStartTime ? moment(dataInfo?.itemStartTime).format('YYYY.MM.DD hh:mm') : '')}`}</span></div>
          </Col>
          <Col span={3}>
            <CheckPermission
              permission='/admin/warningRule/updateBatch'
            >
              <Row onClick={showSetting} style={{ height: '100%' }} justify="end" align="bottom"><SettingFilled style={{ fontSize: '20px', marginRight: "5px" }} /><a>预警设置</a></Row>
            </CheckPermission>
          </Col>
        </Row>
      }
      tabList={[
        {
          tab: '学员列表',
          key: '1',
        },
        {
          tab: '条目列表',
          key: '2',
        },
        {
          tab: '学情数据',
          key: '3',
        },
        {
          tab: '沟通记录',
          key: '4',
        },
        {
          tab: '学情预警',
          key: '5',
        },
        {
          tab: '作业',
          key: '6',
        },
        {
          tab: '复盘列表',
          key: '7'
        }
      ]}
      tabProps={{ size: 'small' }}
      onTabChange={(e) => {
        setActiveKey(e);
      }}
    >
      {activeKey == '1' ?
        <StudentList dataInfo={dataInfo} /> : null
      }
      {activeKey == '2' ? <Studio courseId={id} /> : null}
      {
        activeKey == '3' ? <StudySituation dataInfo={dataInfo} courseId={id} /> : null
      }
      {
        activeKey == '4' ? <ComRecord /> : null
      }
      {
        activeKey == '5' ? <LearnWarn /> : null
      }
      {
        activeKey == '6' ? <HomeWork /> : null
      }
      {
        activeKey == '7' ? <GameList className={dataInfo?.name || '-'} /> : null
      }
      <ModalContext.Provider value={settingCtx}>
        <SettingModal />
      </ModalContext.Provider>
      <Modal title="是否初始化"
        visible={show}
        okText="确定"
        cancelText="取消"
        confirmLoading={loading}
        destroyOnClose={true}
        onCancel={() => { setModal(false); setVisible(false) }}
        onOk={async () => {
          setLoading(true)
          const res = await getWarnDefault({ activityId: id })
          if (res.success) {
            setModal(false);
            const res1 = await getWarnSet({ activityId: id });
            setWarningSet(res1?.result?.records);
          }
          setLoading(false)
        }}
      >
        <p>当前课程未初始化预警，是否初始化？</p>
      </Modal>
    </PageContainer >

  )
}
